<template>
  <div class="bg-gray">
    <an-nav-bar
      title="表单提交"
      @onClickLeft="onClickLeft"
      leftText="返回"
    ></an-nav-bar>
    <div class="box-scroll">
      <van-form @submit="onSubmit">
        <van-field
          v-model="loadList.accountName"
          name="账户名"
          label="账户名"
          placeholder="请输入账户名"
        />
        <van-field
          v-model="loadList.account"
          type="account"
          name="账户号"
          label="账户号"
          placeholder="请输入账户号"
        />
        <van-field
          v-model="loadList.payAmount"
          type="payAmount"
          name="交易金额"
          label="交易金额"
          placeholder="请输入交易金额"
        />
        <van-field
          name="assetAccountType"
          label="状态"
        >
          <template #input>
            <van-radio-group
              v-model="loadList.assetAccountType"
              direction="horizontal"
            >
              <van-radio name="1">活期账户</van-radio>
              <van-radio name="2">整存整取</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="loadList.openAccountDate"
          type="openAccountDate"
          name="开户时间"
          label="开户时间"
          placeholder="请输入开户时间"
          @click="showCalendar = true"
        />
        <van-field
          readonly
          clickable
          name="开户地址"
          :value="loadList.area"
          label="开户地址"
          placeholder="点击选择开户地址"
          @click="showArea = true"
        />
        <van-field
          name="手机号"
          :value="loadList.tel"
          placeholder="请填写手机号"
          type="tel"
          label="手机号"
        />
        <van-field
          :value="loadList.sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
            >发送验证码</van-button>
          </template>
        </van-field>
        <van-field
          name="switch"
          label="开关"
        >
          <template #input>
            <van-switch
              v-model="loadList.switchChecked"
              size="20"
            />
          </template>
        </van-field>
        <van-field
          v-model="loadList.accountName"
          name="账户名"
          label="账户名"
          placeholder="请输入账户名"
        />
        <van-field
          v-model="loadList.account"
          type="account"
          name="账户号"
          label="账户号"
          placeholder="请输入账户号"
        />
        <van-field
          v-model="loadList.payAmount"
          type="payAmount"
          name="交易金额"
          label="交易金额"
          placeholder="请输入交易金额"
        />
        <van-field
          name="assetAccountType"
          label="状态"
        >
          <template #input>
            <van-radio-group
              v-model="loadList.assetAccountType"
              direction="horizontal"
            >
              <van-radio name="1">活期账户</van-radio>
              <van-radio name="2">整存整取</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="loadList.openAccountDate"
          type="openAccountDate"
          name="开户时间"
          label="开户时间"
          placeholder="请输入开户时间"
          @click="showCalendar = true"
        />
        <van-field
          v-model="loadList.accountName"
          name="账户名"
          label="账户名"
          placeholder="请输入账户名"
        />
        <van-field
          v-model="loadList.account"
          type="account"
          name="账户号"
          label="账户号"
          placeholder="请输入账户号"
        />
        <van-field
          v-model="loadList.payAmount"
          type="payAmount"
          name="交易金额"
          label="交易金额"
          placeholder="请输入交易金额"
        />
        <van-field
          name="assetAccountType"
          label="状态"
        >
          <template #input>
            <van-radio-group
              v-model="loadList.assetAccountType"
              direction="horizontal"
            >
              <van-radio name="1">活期账户</van-radio>
              <van-radio name="2">整存整取</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="loadList.openAccountDate"
          type="openAccountDate"
          name="开户时间"
          label="开户时间"
          placeholder="请输入开户时间"
          @click="showCalendar = true"
        />
        <van-field name="uploader">
          <template #input>
            <van-uploader
              accept="*"
              v-model="uploaderList"
              :max-count="1"
              :max-size="100 * 1024 * 1024"
              :deletable="is_answered"
              :disabled="!is_answered"
              :before-read="beforeRead"
              :after-read="afterRead"
              @delete="handleRemove"
            >
              <van-button
                icon="upgrade"
                plain
                type="info"
              >上传文件</van-button>
            </van-uploader>
            <span
              style="color: #4e96ff"
              v-if="uploaderList.length > 0"
              @click="downLoadFile"
            >{{ fileName }}</span>
            <div
              slot="tip"
              class="el-upload__tip"
              style="margin: 20px auto; color: red"
              v-show="isMessageTip"
            >
              {{ tipMessage }}
            </div>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            native-type="submit"
          >提交</van-button>
        </div>
      </van-form>
      <van-calendar
        v-model="showCalendar"
        @confirm="confirmDate"
      />
      <van-popup
        v-model="showArea"
        position="bottom"
      >
        <van-area
          :area-list="areaList"
          @confirm="confirmArea"
          @cancel="showArea = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { areaList } from '@vant/area-data';
import { uploadBackgroundFileApi } from '@/api/accountManage';

export default {
    props: {
        quFileItem: {
            type: Object,
            default: null
        },
        is_answered: {
            // 控制禁用状态
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            loadList: {},
            showCalendar: false, //开户时间弹框
            showArea: false,
            areaList, // 地址选择
            fileName: '', // 上传文件名称
            // 上传文件格式
            acceptAllowFiles:
                '.png, .jpg, .jpeg, .gif, .bmp, .flv, .swf,.mkv,.avi,.rm,.rmvb,.mpeg,.mpg,.ogg,.ogv,.mov,.wmv,.mp4,.mp3,.webm,.wav,.mid,.zip,.xls, .xlsx, .doc, .docx, .rar',
            uploaderList: [], // 已上传的文件列表
            getFileList: [], // 存储已上传的文件信息
            isMessageTip: false, // 上传提示语是否展示
            tipMessage: '', // 上传提示语
            isShowFileList: false, // 是否展示文件列表
            formFileData: {
                userId: '', // 用户Id
                name: '默认',
                type: 1, // 类型
                source: 1, // 来源
                newFileName: '' // 图片上传的新名称
            }
        };
    },
    created() {
        this.formFileData.userId = '010203';
        if (this.quFileItem && this.quFileItem.fileObj.fileName !== '') {
            this.isMessageTip = false;
            this.uploaderList = [
                {
                    name: this.quFileItem.fileObj?.fileName,
                    url: this.quFileItem.fileObj?.fileUrl
                }
            ];
            this.getFileList = [{ url: this.quFileItem.fileObj?.fileUrl }];
            this.fileName = this.quFileItem.fileObj?.fileName;
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        // 日期选择
        confirmDate(date) {
            this.loadList.openAccountDate = `${date.getMonth() + 1}/${date.getDate()}`;
            this.showCalendar = false;
        },
        // 地址选择
        confirmArea(values) {
            this.loadList.area = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
            this.showArea = false;
        },
        // 上传图片之前的操作
        beforeRead(file) {
            let arr = file.name.split('.');
            let fileType = '.' + arr[arr.length - 1].toLowerCase();
            const size = file.size / 1024 / 1024 > 100;
            if (this.acceptAllowFiles.includes(fileType)) {
                this.isShowFileList = true;
            } else {
                this.isShowFileList = false;
                this.isMessageTip = true;
                this.tipMessage = `不支持上传${fileType}类型的文件，请重新上传`;
                return;
            }
            if (size) {
                this.isMessageTip = true;
                this.tipMessage = '上传文件不能大于100M';
                this.uploaderList = [];
                return;
            }
            if (this.isShowFileList) {
                this.isMessageTip = false;
            }
            return true;
        },
        async afterRead(params) {
            // 创建FormData对象，上传图片需要转换二进制，这里要用到FormData
            let uploadFormData = new FormData();
            params.status = 'uploading';
            params.message = '上传中...';
            uploadFormData.append('files', params.file);
            axios
                .post('/file/uploadFile', uploadFormData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                .then((res) => {
                    let { code } = res || {};
                    if (code == '0') {
                        params.status = '';
                        params.message = '';
                        this.getFileList = res.result;
                        this.fileName = this.getFileList[0]['fileName'];
                        this.formFileData.newFileName = this.getFileList[0]['newFileName'];
                        // this.quFileItem.fileObj.fileName =
                        // 	this.getFileList[0]['fileName'];
                        // this.quFileItem.fileObj.newFileName =
                        // 	this.getFileList[0]['newFileName'];
                        // 增加url值信息
                        // this.quFileItem.fileObj.fileUrl =
                        // 	this.getFileList[0]['url'];
                        // Toast('上传成功');
                        this.saveApi();
                    } else if (code == '1') {
                        if (res.msg) {
                            let errMsg = res.msg;
                            Toast(errMsg);
                        }
                        this.uploaderList = [];
                    }
                })
                .catch((err) => {
                    params.status = 'failed';
                    params.message = '上传失败';
                    console.log(err, 'err');
                });
        },
        // 保存上传背景接口
        async saveApi() {
            let data = {
                userId: this.formFileData.userId,
                name: this.fileName,
                type: 1, // 类型
                source: 1, // 来源
                newFileName: this.formFileData.newFileName // 图片上传的新名称
            };
            let res = await uploadBackgroundFileApi(data);
            const { code } = res;
            if (code == '0') {
                Toast('上传成功');
            } else {
                Toast.fail('保存失败');
            }
        },
        // 下载附件
        downLoadFile() {
            if (this.getFileList.length == 0) return;
            window.localStorage.href = this.getFileList[0].url;
        },
        // 删除文件
        handleRemove() {
            this.uploaderList = [];
            this.tipMessage = '';
            this.fileName = '';
        },
        // 提交
        onSubmit() {}
    }
};
</script>

<style lang="scss" scoped></style>